(function(){

    // 获取地址
    let url = location.href
    console.log(url);


    // 解码地址
    let title = getUrlParams(url);
    console.log(title);

    // 获取对应位置的名称
    let titleid=title.title
    console.log(titleid);

    // 获取元素的个数
     let categoryid =title.categoryid
     console.log(categoryid);
    
     let html=
     `
     <a href="/index.html">首页></a>
     <a href="/pages/category.html">全部分类></a>
     <a href="#">${titleid}</a>
     <p>筛选</p>
     `
     $('#nav ').html(html)

    fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=1`)
    .then(body=>body.json())
    .then(res=>{
        
        console.log(res);
         let result= res.result
         let{result:thing}=res
         let productId = thing.productId
         console.log(productId);
        // 页面元素个数
        let totalCount = res.totalCount;
        console.log(totalCount);


        // 获得的页面总数
        console.log(totalCount/10);
        let math =Math.ceil(totalCount/10);
        console.log(math);


        // 动态获取的页面数
        body=""
        for (var i=1;i<=math;i++){
            console.log(i);
            body+=
            `
            <option value="${i}">${i}/${math}</option>
            `

        }
      $('#select').append(body)



      $('.btn1').prop('disabled',true).css({background:'gray'})



        // if(totalCount/10)
        // let result= res.result[0]
        // console.log(result);
        // ${result.}
        let html = ""
        // <li productid=${item.productId}>
        result.forEach(item => {
            
            html+=
            `<li>
        <a href="/pages/bijia-2.html?title=${titleid}&categoryid=${categoryid}&productid=${item.productId}">
            <div class="img">${item.productImg}</div>
            <div class="infoR">
                <div class="title">
                    <h4>${item.productName}<span>${item.productPrice}</span>
                    </h4>
                </div>
                <div class="other">
                    <span class="diyi">${item.productQuote}</span>
                    <span class="dier">
                        <i><img src="/assets/images/QQ-1.jpg" alt=""></i>
                        <span>${item.productCom}</span>
                    </span>
                </div>
            </div>
        </a>
    </li>
            `   
        });
        $('#product ul').html(html)

        
    })




    let a = 1         //$('#select').val()

    $('.btn2').click(function(){
        // 下一页，a++
        
        a++
       // console.log(a);
        
        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=${a}`)
        .then(body=>body.json())
        .then(res=>{
            console.log(a);
            $('#select').val(a)
             let result= res.result
             let{result:thing}=res
             let productId = thing.productId
            // 页面元素个数
            let totalCount = res.totalCount;
            // let result= res.result[0]
            // console.log(result);
            // ${result.}

            console.log(totalCount/10);
            let math =Math.ceil(totalCount/10);



            let html = ""
            // <li productid=${item.productId}>
            result.forEach(item => {
                
                html+=
                `<li>
            <a href="/pages/bijia-2.html?title=${titleid}&categoryid=${categoryid}&productid=${item.productId}">
                <div class="img">${item.productImg}</div>
                <div class="infoR">
                    <div class="title">
                        <h4>${item.productName}<span>${item.productPrice}</span>
                        </h4>
                    </div>
                    <div class="other">
                        <span class="diyi">${item.productQuote}</span>
                        <span class="dier">
                            <i><img src="/assets/images/QQ-1.jpg" alt=""></i>
                            <span>${item.productCom}</span>
                        </span>
                    </div>
                </div>
            </a>
        </li>
                `   
            });
            $('#product ul').html(html)
            
            if(a==1){
                console.log(222);
                $('.btn1').prop('disabled',true).css({background:'gray'})
            }else if(a>1){
                console.log(333);
              $('.btn1').prop('disabled',false).css({background:'orange'})
            }




            if(a==math){
             
                $('.btn2').prop('disabled',true).css({background:'gray'})
            }else if(a<math){
            
              $('.btn2').prop('disabled',false).css({background:'orange'})
            }

            
        })
    })

    // 上一页
    
    $('.btn1').click(function(){
        // a--
        // let a = $('#select').val()
        a--

        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=${a}`)
        .then(body=>body.json())
        .then(res=>{
            console.log(a);
            $('#select').val(a)
             let result= res.result
             let{result:thing}=res
             let productId = thing.productId
            // 页面元素个数
            let totalCount = res.totalCount;
            // let result= res.result[0]
            // console.log(result);
            // ${result.}


            // let totalCount = res.totalCount;
            console.log(totalCount);


        // 获得的页面总数
        console.log(totalCount/10);
        let math =Math.ceil(totalCount/10);



            let html = ""
            // <li productid=${item.productId}>
            result.forEach(item => {
                
                html+=
                `<li>
            <a href="/pages/bijia-2.html?title=${titleid}&categoryid=${categoryid}&productid=${item.productId}">
                <div class="img">${item.productImg}</div>
                <div class="infoR">
                    <div class="title">
                        <h4>${item.productName}<span>${item.productPrice}</span>
                        </h4>
                    </div>
                    <div class="other">
                        <span class="diyi">${item.productQuote}</span>
                        <span class="dier">
                            <i><img src="/assets/images/QQ-1.jpg" alt=""></i>
                            <span>${item.productCom}</span>
                        </span>
                    </div>
                </div>
            </a>
        </li>
                `   
            });
            $('#product ul').html(html)



            if(a==1){
            
                $('.btn1').prop('disabled',true).css({background:'gray'})
            }else if(a>1){
            
              $('.btn1').prop('disabled',false).css({background:'orange'})
            }


            if(a==math){
             
                $('.btn2').prop('disabled',true).css({background:'gray'})
            }else if(a<math){
            
              $('.btn2').prop('disabled',false).css({background:'orange'})
            }

            
        })
    })

    // 监听下拉框变化
    $('#select').change(function(){
         a = $('#select').val()
       
        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=${a}`)
        .then(body=>body.json())
        .then(res=>{
             let result= res.result
             let{result:thing}=res
             let productId = thing.productId



            // 页面元素个数
            let totalCount = res.totalCount;
            let math =Math.ceil(totalCount/10);


            // let result= res.result[0]
            // console.log(result);
            // ${result.}
            let html = ""
            // <li productid=${item.productId}>
            result.forEach(item => {
                
                html+=
                `<li>
            <a href="/pages/bijia-2.html?title=${titleid}&categoryid=${categoryid}&productid=${item.productId}">
                <div class="img">${item.productImg}</div>
                <div class="infoR">
                    <div class="title">
                        <h4>${item.productName}<span>${item.productPrice}</span>
                        </h4>
                    </div>
                    <div class="other">
                        <span class="diyi">${item.productQuote}</span>
                        <span class="dier">
                            <i><img src="/assets/images/QQ-1.jpg" alt=""></i>
                            <span>${item.productCom}</span>
                        </span>
                    </div>
                </div>
            </a>
        </li>
                `   
            });
            $('#product ul').html(html)






            if(a==1){
                console.log(222);
                $('.btn1').prop('disabled',true).css({background:'gray'})
            }else if(a>1){
                console.log(333);
              $('.btn1').prop('disabled',false).css({background:'orange'})
            }




            if(a==math){
             
                $('.btn2').prop('disabled',true).css({background:'gray'})
            }else if(a<math){
            
              $('.btn2').prop('disabled',false).css({background:'orange'})
            }

            
        })
    })

})()




function fengZ(){

}
